<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
			<el-button v-prmis="'strategy_payee_add'" type="primary" size="small" @click="add()">
				<template #default>
					<span class="text-sm">{{ $t('strategy.payee.add') }}</span>
				</template>
			</el-button>
		</div>
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="sp_id" label="ID" />

				<el-table-column prop="sp_name" :label="$t('strategy.payee.name')">
					<template #default="scope">
						{{ scope.row.sp_name || $t('machine.types.undefined') }}
					</template>
				</el-table-column>

				<el-table-column prop="payee_type" :label="$t('strategy.payee.type')">
					<template #default="scope">
						{{ $t(getPlevel.getPpay(scope.row.payee_type) )}}
					</template>
				</el-table-column>

				<el-table-column prop="app_id" :label="$t('strategy.payee.Appid')">
					<template #default="scope">
						{{ scope.row.app_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="mch_id" :label="$t('strategy.payee.merchantID')">
					<template #default="scope">
						{{ scope.row.mch_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-else type="success">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')">
					<template #default="scope">
						<el-button v-prmis="'strategy_payee_update'" type="primary" size="small"
							@click="add(scope.row, 2)"><el-icon>
								<EditPen />
							</el-icon></el-button>
						<el-button v-prmis="'strategy_payee_del'" type="danger" size="small"
							@click="del(scope.row.sp_id)"><el-icon>
								<Delete />
							</el-icon></el-button>
					</template>
				</el-table-column>

			</el-table>
			<PageNum :total="data.total" :page="data.payee" @exposeData="current" @fraction="fraction" />
		</div>
		<el-dialog v-if="data.dialogVisible" v-model="data.dialogVisible" :title="data.title" center width="50%">
			<collcontent :adpayee="data.adpayee" :paytype="data.paytype" @edit="edit" />
		</el-dialog>
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import collcontent from '../common/collcontent.vue';
import { getpayeeList, addpayee, updatepayee, delpayee } from '@/api/payee';
let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	title: '', // 弹窗标题
	lookup: [ // 筛选栏
		{ title: $t('strategy.payee.name'), type: 'input', value: '', key: 'sp_name' },
		{ title: $t('strategy.payee.Appid'), type: 'input', value: '', key: 'app_id' },
		{ title: $t('strategy.payee.merchantID'), type: 'input', value: '', key: 'mch_id' },
		{ title: $t('strategy.payee.state'), type: 'define', select: [{ label: $t('public.enable'), value: 1 }, { label: $t('public.disable'), value: 2 }], value: '', key: 'status' },
	],
	list: [], // 列表信息
	paytype: [], // 收款类型
	adpayee: {}, // 选中的策略
	payee: { // 筛选数据
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getpayeeList(data.payee).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		if (e[key] != '') {
			data.payee[key] = e[key]
		}
	}
	data.payee.page = 1
	data.payee.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.payee.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.payee.pageNum = e
	getlist()
}

// 添加策略
let add = (e, falg) => {
	data.adpayee = {
		sp_name: '',
		payee_type: 1,
		app_id: '',
		mch_id: '',
		content: {},
		status: 1,
		callbackUrl: '',
		titel: '',
		ico: ''
	}

	data.title = $t('strategy.payee.add')
	if (data.paytype.length == 0) {
		let arr = getPlevel.getPpay('', 1)
		for (let i = 1; i < arr.length; i++) {
			data.paytype.push(arr[i])
		}
	}
	if (e != undefined) {
		data.title = $t('strategy.income.modify')
		data.adpayee = e
	}
	data.dialogVisible = true
}

// 数据提交
let edit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}
	e.content = JSON.stringify(e.content)
	if (e.sp_id == undefined) {
		// 添加策略
		addpayee(e).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.addSuccess'),
					type: 'success'
				})
				data.dialogVisible = false
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
		return
	}
	// 修改策略
	updatepayee(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.modifySuccess'),
				type: 'success'
			})
			data.dialogVisible = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

let del = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delpayee({ sp_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}
getlist()
</script>
